<template>
  <div class="ly-box ly-bill-info">
    <h1 class="wyjf-title">缴费记录</h1>
    <yd-cell-group title="查询房间">
      <yd-cell-item arrow>
        <div slot="left">{{name}}</div>
        <div slot="right">
          <select v-model="roomId" @change="getHistory(roomId)">
            <option :key="index" v-for="(item,index) in roomList" :value="item.id">
              {{item.groupName}}{{item.building}}{{item.room}}
            </option>
          </select>
        </div>
      </yd-cell-item>
    </yd-cell-group>

    <yd-cell-group title="缴费记录">
    <yd-accordion>
      <yd-accordion-item class="bill-item" v-for="(item,index) in historyList" :key="index" open>
        <div slot="title" class="title">
          <div class="left">{{item.BillsDate||"--"}}</div>
          <div class="right">{{item.ChargeMode||"--"}}</div>
          <div class="right">{{item.BillsAmount||"--"}}元</div>
        </div>

        <div class="infoList">
          <div class="info-tips"></div>
          <div class="info-item" v-for="(info,index) in item.Data" :key="index">
            <div class="left">{{info.CostName}}({{info.YearMonth}})</div>
            <div class="right">{{info.ChargeAmount}}元</div>
          </div>
        </div>
      </yd-accordion-item>
    </yd-accordion>
    </yd-cell-group>


  </div>
</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";
  import wx from "weixin-js-sdk"

  export default {

    data() {
      return {
        roomId: '',
        roomList: [],
        historyList: [],
        name: '',
        infoList: [],
      };
    },
    created: function () {
      this.init();
    },
    methods: {
      init: function () {
        //判断是否路由中带的有参数
        // const housingId = storage.getObj("housingId").id;
        // this.name = storage.getObj("housingId").name;
        const housingId = this.$route.query.housingId
        const _roomId = this.$route.query.roomId;
        http.get("/communityApps/propertyPay/rooms?housingId=" + housingId).then(res => {
          if (res.data.code == 20000) {
            this.roomList = res.data.data.roomList;
            if (_roomId) {
              this.roomId = _roomId;
              this.getHistory(_roomId);
            } else {
              this.roomId = res.data.data.roomList[0].id;
              this.getHistory(res.data.data.roomList[0].id);
            }
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });


      },

      //获取缴费记录
      getHistory: function (roomId) {
        http.get("/communityApps/propertyPay/getHistory?roomId=" + roomId).then(res => {
          if (res.data.code == 20000) {
            this.historyList = res.data.data;
            console.log(this.historyList);
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },

    }
  };
</script>

<style lang="scss">
  .ly-bill-info {
    .bill-item {
      background: #fff;
      border-bottom: 1px solid #eee;
    }
    .yd-accordion-title {
      span {
        width: 100%;
        height: auto;
      }
    }
    .title {
      display: flex;
      .left {
        flex: 1;
      }
      .right {
        padding-right: 0.1rem;
      }
    }
  }


</style>

<style scoped lang="scss">
  .wyjf-title {
    font-size: 0.48rem;
    font-weight: normal;
    color: #04be02;
    text-align: center;
    line-height: 1rem;
  }

  .wyjf-btn {
    width: 86%;
    margin: 0 auto;
  }

  .infoList {
    width: 100%;
    height: auto;
    padding: 0.2rem;
    border-top: 1px solid #eee;
    .info-item {
      width: 100%;
      display: flex;
      color: #666;
      line-height: 0.8rem;
      .left {
        flex: 1;
      }
    }
  }

</style>
